<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5</title>
  <!-- Css link -->
  <link rel="stylesheet" href="style.css" />
  <!-- Bootstrap 5 css -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand text-capitalize" href="#">kishanlal choudhary</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="about.html">About us</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Services
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item" href="#">Something else here</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="gallery.html">gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-capitalize" href="contact.html">contact us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <header>
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="Images\img1.jpg" class="d-block" alt="..." />
          <div class="carousel-caption d-md-block">
            <h5>First slide label</h5>
            <p>
              Some representative placeholder content for the first slide.
            </p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="Images\img2.jpg" class="d-block" alt="..." />
          <div class="carousel-caption d-md-block">
            <h5>Second slide label</h5>
            <p>
              Some representative placeholder content for the second slide.
            </p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="Images\img3.jpg" class="d-block" alt="..." />
          <div class="carousel-caption d-md-block">
            <h5>Third slide label</h5>
            <p>
              Some representative placeholder content for the third slide.
            </p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </header>
  <!-- About us section start-->
  <section class="main_heading my-5">
    <div class="text-center">
      <h1>About Us</h1>
      <hr class="w-25 mx-auto" />
    </div>
    <div class="container">
      <div class="row my-5">
        <div class="col-lg-6 col-md-6 col-12 col-xxl-6 d-flex justify-content-end">
          <img src="Images\img4.jpg" alt="about images" class="img-fluid about_image" />
        </div>
        <div
          class="col-lg-6 col-md-6 col-12 col-xxl-6 my-3 d-flex justify-content-center align-items-start flex-column">
          <h1>My Journey</h1>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste
            rem, necessitatibus dignissimos modi voluptatibus quibusdam
            aperiam cupiditate blanditiis exercitationem corrupti, libero
            eaque dicta maiores odit ducimus rerum nihil! Culpa, pariatur eius
            officiis atque deserunt sapiente? Blanditiis dolorem expedita quam
            est odit nam, cum quo nihil.
          </p>
          <button type="button" class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="right"
            title="Who i am">
            Check More
          </button>
        </div>
      </div>
    </div>
  </section>
  <!-- About us section end -->

  <!-- Our Services section start -->
  <section class="main_heading my-5 bg-light pt-5">
    <div class="text-center">
      <h1>Our Services</h1>
      <hr class="w-25 mx-auto" />
    </div>
    <div class="container_services">
      <div class="row my-5 mx-2">
        <div class="col-md-4 col-10 col-xxl-4 mx-auto px-2">
          <div class="card mb-3" style="max-width: 540px">
            <div class="row">
              <div class="col-md-4">
                <img src="Images\img5.jpg" class="rounded-start service_img" alt="services images" />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a
                    little bit longer.
                  </p>
                  <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto px-2">
          <div class="card mb-3" style="max-width: 540px">
            <div class="row">
              <div class="col-md-4">
                <img src="Images\img5.jpg" class="rounded-start service_img" alt="services images" />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a
                    little bit longer.
                  </p>
                  <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto px-2">
          <div class="card mb-3" style="max-width: 540px">
            <div class="row">
              <div class="col-md-4">
                <img src="Images\img5.jpg" class="rounded-start service_img" alt="services images" />
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    This is a wider card with supporting text below as a
                    natural lead-in to additional content. This content is a
                    little bit longer.
                  </p>
                  <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-12 text-center my-5">
          <button type="button" class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="right"
            title="Who i am">
            Check More
          </button>
        </div>
      </div>
    </div>
  </section>
  <!-- Our Services section end -->

  <!-- Gallery section start -->
  <section class="main_heading my-5">
    <div class="text-center">
      <h1>Gallery</h1>
      <hr class="w-25 mx-auto" />
    </div>

    <div class="container">
      <div class="row my-5 gy-3">
        <div class="col-md-4 col-10 col-xxl-4 mx-auto shadow bg-body rounded">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
        <div class="col-md-4 col-10 col-xxl-4 mx-auto">
          <figure>
            <img src="Images\img6.jpg" alt="" class="img-fluid" />
          </figure>
        </div>
      </div>
    </div>
  </section>
  <!-- Gallery section end -->

  <!-- offers section start -->
  <section class="main_heading my-5 py-3 offer_style">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xxl-12 col-12 py-5 text-center">
          <h1 class="text-white">Check out my videos</h1>
          <p>
            Never give up on something that you can't go a day without
            thinking about.
          </p>
          <button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#exampleModal">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
              <path fill-rule="evenodd"
                d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
            </svg>
            Check More
          </button>
        </div>
      </div>
    </div>
  </section>
  <!-- offers section end -->

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">My awesome Video</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h3>I hope you all are enjoying this video</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="https://getbootstrap.com/docs/5.0/components/modal/" target="_blank">
            <button type="button" class="btn btn-primary">Check Now</button>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Contact us section start -->
  <section class="main_heading my-5">
    <div class="text-center">
      <h1>Contact Us</h1>
      <hr class="w-25 mx-auto" />
    </div>
    <div class="container-fluid bg-light py-3">
      <div class="row">
        <div class="col-xxl-8 col-10 col-md-8 mx-auto">
          <form>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Name</label>
              <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Enter your name" required/>
            </div>
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
              <div id="emailHelp" class="form-text">
                We'll never share your email with anyone else.
              </div>
            </div>
            <div class="mb-3">
              <label class="pe-4">Gender</label>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">Female</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">Male</label>
              </div>
            </div>
            <label for="exampleDataList" class="form-label">Select City</label>
            <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
            <datalist id="datalistOptions">
              <option value="San Francisco"></option>
              <option value="New York"></option>
              <option value="Seattle"></option>
              <option value="Los Angeles"></option>
              <option value="Chicago"></option>
            </datalist>
            <div class="my-3">
              <div class="input-group mb-3">
                <input type="file" class="form-control" id="inputGroupFile02">
                <label class="input-group-text" for="inputGroupFile02">Upload</label>
              </div>
            </div>
            <div class="mb-3">
              <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1" />
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- Contact us section end -->

  <!-- footer start -->
  <footer class="bg-secondary text-center text-white py-3">
    <p>@copyright Kishanlal Choudhary</p>
  </footer>
  <!-- footer end -->

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>
  <script type="text/javascript">
    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  </script>
</body>

</html>